<template>
  <div class="app-container">
    <q-form @register="registerQueryForm" />
    <div class="buttons" style="margin-bottom: 16px">
      <el-button type="primary" icon="Plus" @click="onAdd">新增</el-button>
    </div>
    <q-table @register="registerTable">
      <template #operation="{ rowData }">
        <el-button type="primary" size="small" @click="onEdit(rowData)">编辑</el-button>
        <el-button type="danger" size="small" @click="onDelete(rowData)">删除</el-button>
      </template>
    </q-table>
    <q-drawer @register="registerDrawer" @ok="onDrawerOk" @cancel="closeDrawer">
      <q-form @register="registerForm" />
    </q-drawer>
  </div>
</template>

<script setup>
import QTable from '@/components/Q/QTable/QTable.vue'
import useTable from '@/components/Q/QTable/hooks/useTable.js'
import QForm from '@/components/Q/QForm/QForm.vue'
import useForm from '@/components/Q/QForm/hooks/useForm.js'
import goodsApi from '@/api/base/goods/goods.js'
import QDrawer from '@/components/Q/QDrawer/QDrawer.vue'
import useDrawer from '@/components/Q/QDrawer/hooks/useDrawer.js'
import { ElMessage } from 'element-plus'

const [registerTable, { reload }] = useTable({
  rowKey: 'goodsId',
  columns: [
    {
      label: '商品名称',
      prop: 'goodsName'
    },
    {
      label: '商品颜色',
      prop: 'colorName'
    },
    {
      label: '商品价格',
      prop: 'price'
    },
    {
      label: '品牌',
      prop: 'brand'
    },
    {
      label: '款式',
      prop: 'style'
    },
    {
      label: '商品类别',
      // prop: 'categoryName'
      prop: 'categoryNames'
    },
    {
      label: '尺码',
      prop: 'sizeName'
    },
    {
      label: '季节',
      prop: 'season'
    },
    {
      label: '操作',
      prop: 'operation',
      slotName: 'operation',
      fixed: 'right'
    }
  ],
  listApi: goodsApi.getList
})
const [registerQueryForm] = useForm({
  config: [
    {
      col: 4,
      label: '商品名称',
      prop: 'goodsName',
      type: 'text',
      rules: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
      ]
    },
    {
      col: 4,
      label: '创建日期',
      prop: 'createDate',
      type: 'date'
    }
  ]
})

const [registerDrawer, { openDrawer, closeDrawer, setOkButtonLoading, setLoading }] = useDrawer()

const [registerForm, { validate, getForm, setForm }] = useForm({
  config: [
    {
      col: 4,
      label: '商品名称',
      prop: 'goodsName',
      type: 'text',
      rules: [{ required: true, message: '请输入商品名称', trigger: 'blur' }]
    },
    {
      col: 4,
      label: '商品价格',
      prop: 'price',
      type: 'text',
      rules: [{ required: true, message: '请输入商品价格', trigger: 'blur' }]
    },
    { col: 4, label: '商品单位', prop: 'unit', type: 'text' },
    { col: 4, label: '品牌', prop: 'brand', type: 'text' },
    { col: 4, label: '款式', prop: 'style', type: 'text' },
    { col: 4, label: '商品类别', prop: 'categoryId', type: 'text' },
    { col: 4, label: '颜色', prop: 'colorId', type: 'text' },
    { col: 4, label: '尺码', prop: 'sizeId', type: 'text' },
    { col: 4, label: '季节', prop: 'season', type: 'text' },
    { col: 4, label: '备注', prop: 'remark', type: 'text' }
  ]
})

const onDelete = async rowData => {
  try {
    const res = await goodsApi.delete(JSON.stringify([rowData.goodsId]))
    ElMessage.success(res.msg)
    reload()
  } catch (e) {
    ElMessage.success('操作失败')
  }
}

const onEdit = async rowData => {
  openDrawer({ title: '编辑商品' })
  setLoading(true)
  const res = await goodsApi.getInfo(rowData.goodsId)
  setForm(res.data)
  setLoading(false)
}

const onAdd = () => {
  openDrawer({ title: '新增商品' })
}

const onDrawerOk = async () => {
  const valid = await validate()
  if (valid) {
    try {
      setOkButtonLoading(true)
      const formData = getForm()
      let res
      if (formData.goodsId > 0) {
        res = await goodsApi.update(formData)
      } else {
        res = await goodsApi.add(formData)
      }
      ElMessage.success(res.msg)
      closeDrawer()
      reload()
    } catch (e) {
      ElMessage.success('操作失败')
    } finally {
      setOkButtonLoading(false)
    }
  }
}
</script>

<style scoped lang="scss"></style>
